<style lang="less" scoped>
.tag_style {
  overflow: auto;
  width: 82%;
  flex: 1;
  display: flex;
}
</style>


<template>
  <div>
    <div class="tag_style">
      <el-tag :closable="item.path=='/home'?false:true"
              :type="item.path==$route.path?'':'info'"
              style="margin: 3px;" v-for="item in pageRoute" :key="item.path"
              @click="jumpRouter(item.path)" @close="handleClose(item.path)">
        {{ item.name }}
      </el-tag>


      <span style="position: absolute;right: 2px">
         <el-dropdown style="margin: 3px;">
        <el-button type="primary" size="mini" plain>
          更多操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="closeAll">关闭全部</el-dropdown-item>
          <el-dropdown-item @click.native="closeOther">关闭其他</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </span>

    </div>
  </div>
</template>
<script>
export default {
  name: "routeLable",
  data() {
    return {
      pageRoute: [
        {path: '/home', name: '首 页'},
      ],
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClose(data) {
      let paths = []
      this.pageRoute.forEach(e => {
        paths.push(e.path)
      })
      let index = paths.indexOf(data)
      this.pageRoute.splice(index, 1);
      if (this.$route.path == data) {
        let path = this.pageRoute[index - 1].path
        if (index == 0) {
          path = '/home'
        }
        this.$router.push({
          path: path
        })
      }
    },
    jumpRouter(data) {
      this.$router.push({
        path: data
      })
    },

    closeAll() {
      this.pageRoute = [{path: '/home', name: '首 页'}]
      this.$router.push({
        path: '/home'
      })
    },
    closeOther() {
      this.pageRoute = [{path: '/home', name: '首 页'}]
      let newPath = {
        name: this.$route.meta.title,
        path: this.$route.path
      }
      this.pageRoute.push(newPath)
      this.$router.push({
        path: newPath.path
      })
    },
  },
  watch: {
    $route(to, from) {
      let paths = []
      this.pageRoute.forEach(e => {
        paths.push(e.path)
      })
      if (!paths.includes(to.path) && '/home' != to.path && '/' != to.path) {
        let newPath = {
          name: to.meta.title,
          path: to.path
        }
        this.pageRoute.push(newPath)
      }
    }
  },
  computed: {},
}
</script>

